<template>
  <div class="h-full w-full flex flex-col justify-between">
    <div class="form p-[15px] pb-0">
      <el-form>
        <el-row :gutter="12">
          <el-col :span="4">
            <el-form-item>
              <el-input v-model="form.name" placeholder="用户名/昵称/备注" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-select class="!w-full" v-model="form.status">
                <el-option
                  v-for="item in statusType"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-button type="primary" @click.stop="search">搜索</el-button>
            <el-button type="danger" @click.stop="handleRefresh">清空</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="grow-[1] h-0 mx-[15px]">
      <el-table
        scrollbar-always-on
        ref="elTableRef"
        v-loading="state.loading"
        :data="list"
        height="100%"
        style="width: 100%"
        stripe
        border
        fit
      >
        <template #empty>
          <ui-empty />
        </template>
        <el-table-column align="center" prop="Name" label="用户名" />
        <el-table-column align="center" prop="RoomCode" label="房间号" />
        <el-table-column align="center" prop="IncomeStatus" label="申请状态">
          <template #default="{ row }: TableItem">
            <el-button :type="IncomeStatusMap[row.IncomeStatus].type" size="small">
              {{ IncomeStatusMap[row.IncomeStatus].text }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="UpdatedAt" label="时间">
          <template #default="{ row }: TableItem">
            <span>{{ formatDate(row.UpdatedAt) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="170">
          <template #default="{ row }: TableItem">
            <div class="text-center text-green" v-if="row.IncomeStatus == 0">已通过</div>
            <div class="text-center text-red" v-if="row.IncomeStatus == 2">已拒绝</div>
            <el-button
              v-if="row.IncomeStatus == 1 && premsStore.isApplyJoinroom"
              :loading="row.Updating"
              :disabled="row.Updating"
              type="primary"
              size="small"
              @click="handlePass(row)"
              >通过</el-button
            >
            <el-button
              v-if="row.IncomeStatus == 1 && premsStore.isApplyJoinroom"
              :loading="row.Updating"
              :disabled="row.Updating"
              type="danger"
              size="small"
              @click="handleReject(row)"
              >拒绝</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="flex justify-end my-[10px] mx-[15px]">
      <ui-pagination
        :total="state.total"
        v-model:pageSize="state.pageSize"
        v-model:currentPage="state.page"
        @current-change="getData"
      ></ui-pagination>
    </div>
  </div>
</template>
<script setup lang="ts">
import $bus from "@/utils/bus";
import { debounce } from "lodash-es";
import { useList } from "@/hooks/useList";
import { formatDate, getDateArray } from "~/utils/common";
import { message } from "~/utils/message";
import { reqJoinRoomList, reqJoinRoomPass, reqJoinRoomReject } from "@/api/apply";
import { usePremsStore } from "@/store/modules/prems";

interface TableItem {
  row: JoinRoomRecordItem;
}

const getDate = () => {
  const date: Record<string, string[]> = getDateArray();
  return date;
};
const premsStore = usePremsStore();
const form = reactive({
  name: "",
  status: "-1",
  date: getDate()["today"]
});
const statusType = [
  { name: "全部状态", value: "-1" },
  { name: "审核中", value: "1" },
  { name: "已通过", value: "0" },
  { name: "已拒绝", value: "2" }
];
const IncomeStatusMap = {
  0: { text: "通过", type: "success" },
  1: { text: "待审核", type: "info" },
  2: { text: "拒绝", type: "danger" }
};
// 获取参数
const getParams = () => {
  const params: any = {};
  if (form.name) {
    params.Name = form.name;
  }
  if (form.status && form.status != "-1") {
    params.Status = form.status;
  }
  return params;
};
const { elTableRef, state, list, getData, search } = useList<JoinRoomRecordItem, any>(
  reqJoinRoomList,
  getParams
);

const handleRefresh = () => {
  form.name = "";
  form.status = "-1";
  form.date = getDate()["today"];
  search();
};

const handlePass = debounce(
  async (row: JoinRoomRecordItem) => {
    try {
      row.Updating = true;
      await reqJoinRoomPass(row.Id);
      row.Updating = false;
      message.success("进房审核已通过");
      handleRefresh();
    } catch (error) {
      row.Updating = false;
      console.log(error);
    }
  },
  300,
  { leading: true, trailing: false }
);

const handleReject = debounce(
  async (row: JoinRoomRecordItem) => {
    try {
      row.Updating = true;
      await reqJoinRoomReject(row.Id);
      row.Updating = false;
      message.success("进房审核已驳回");
      handleRefresh();
    } catch (error) {
      row.Updating = false;
      console.log(error);
    }
  },
  300,
  { leading: true, trailing: false }
);

onMounted(() => {
  getData();
  // 监听监听进房审核消息
  $bus.on("update-join-room-msg", () => {
    handleRefresh();
  });
});
onBeforeUnmount(() => {
  $bus.off("update-join-room-msg");
});
</script>
